<style lang="less" scoped>
@import "./user.less";
</style>

<template>
  <div>
    <Row>
      <Col span="24">
        <Card class="margin-bottom-10">
          <Form inline>
            

            <FormItem class="margin-bottom-0">
              <Input v-model="searchConf.name" placeholder="请输入姓名"></Input>
            </FormItem>

            <FormItem class="margin-bottom-0">
              <Input
                v-model="searchConf.id_card"
                placeholder="请输入身份证号"
              ></Input>
            </FormItem>

            <FormItem class="margin-bottom-0">
              <Input
                v-model="searchConf.nickname"
                placeholder="请输入微信昵称"
              ></Input>
            </FormItem>
            <FormItem class="margin-bottom-0">
              <Input
                v-model="searchConf.phone"
                placeholder="请输入手机号"
              ></Input>
            </FormItem>
            <FormItem class="margin-bottom-0">
              <Select
                v-model="searchConf.status"
                clearable
                placeholder="请选择考勤结果"
                style="width:180px"
              >
                <Option
                  v-for="(v, i) in tableShow.statusList"
                  :value="i"
                  :key="i"
                >
                  {{ v }}</Option
                >
              </Select>
            </FormItem>
            <FormItem class="margin-bottom-0">
              <Button type="primary" @click="search"
                >{{ $t("find_button") }}/{{ $t("refresh_button") }}</Button
              >
            </FormItem>
          </Form>
        </Card>
      </Col>
    </Row>
    <Row>
      <Col span="24">
        <Card>
          <div class="margin-bottom-15">
            <Button type="primary" v-has="'App/add'" @click="exportFun">{{
              $t("export")
            }}</Button>
          </div>
          <div>
            <Table
              :loading="listLoading"
              :columns="columnsList"
              :data="tableData"
              border
              disabled-hover
            ></Table>
          </div>
          <div class="margin-top-15" style="text-align: center">
            <Page
              :total="tableShow.listCount"
              :current="tableShow.currentPage"
              :page-size="tableShow.pageSize"
              @on-change="changePage"
              @on-page-size-change="changeSize"
              show-elevator
              show-sizer
              show-total
            ></Page>
          </div>
        </Card>
      </Col>
    </Row>
  </div>
</template>
<script>
import {
  getList
} from "@/api/wxUserSign";
import { getAll } from "@/api/app-group";
import { FormItem } from "view-design";


export default {
  name: "wx_user_list",
  components: {},
  data() {
    return {
      appGroup: [],
      columnsList: [
        {
          title: "ID",
          type: "index",
          width: 65,
          key: "id",
          align: "center"
        },
        {
          title: "项目名称",
          key: "app_name",
          align: "center",
          width: 200
        },
        {
          title: "微信昵称",
          key: "nickname",
          align: "center",
          width: 160
        },
        {
          title: "微信头像",
          align: "center",
          key: "headimgurl",
          width: 120,
          render: (h, params) => {
            return h("img", {
              attrs: {
                src: params.row.headimgurl,
                width: 100,
                height: 100
              }
            });
          }
        },
        {
          title: "手机号",
          key: "phone",
          align: "center",
          width: 130
        },
        {
          title: "姓名",
          key: "name",
          width: 120,
          align: "center"
        },
        {
          title: "身份证号",
          key: "id_card",
          align: "center",
          width: 180
        },
        {
          title: "日期",
          key: "date",
          align: "center",
          width: 150
        },
        {
          title: "考勤结果",
          align: "center",
          width: 100,
          render: (h, params) => {
            let status = params.row.status;
            return h(
              "Tag",
              {
                attrs: {
                  color: "primary"
                }
              },
              this.tableShow.statusList[status]
            );
          }
        },
        {
          title: "创建时间",
          key: "create_time",
          align: "center",
          width: 200
        },
      ],
      tableData: [],
      groupInfo: {},
      groupList: {},
      tableShow: {
        currentPage: 1,
        pageSize: 10,
        listCount: 0
      },
      searchConf: {
        id_card: "",
        name: "",
        nickname: "",
        phone: "",
        export: 0,
      },
      modalSetting: {
        show: false,
        loading: false,
        index: 0
      },
      formItem: {
        app_name: "",
        app_id: "",
        app_secret: "",
        app_info: "",
        app_api: {},
        app_group: "default",
        id: 0,
        app_address: ""
      },
      ruleValidate: {
        app_name: [
          { required: true, message: "项目名称不能为空", trigger: "blur" }
        ]
      },
      checkAllStatus: {},
      checkAllIndeterminate: {},
      buttonShow: {
        edit: true,
        del: true,
        changeStatus: true,
        detail: true
      },
      listLoading: false,
      tableShow: {
        statusList: {
          1 : '正常',
          2 : '迟到',
          3 : '早退',
          4 : '请假',
        }
        
      }
    };
  },
  created() {
    let vm = this;
    vm.getList();
  },
  methods: {
    exportFun() {
      this.searchConf.export = 1;
      let vm = this;
      getList({
        page: vm.tableShow.currentPage,
        size: vm.tableShow.pageSize,
        id_card: vm.searchConf.id_card,
        nickname: vm.searchConf.nickname,
        phone: vm.searchConf.phone,
        name: vm.searchConf.name,
        status: vm.searchConf.status,
        export: vm.searchConf.export
      }).then(response => {
        let fileUrl = response.data.data.file_url;
        console.log(fileUrl);
        window.open(fileUrl);
      });
    },
    cancel() {
      //   this.formItem.id = 0;
      //   this.$refs["myForm"].resetFields();
      this.modalSetting.show = false;
      this.modalSetting.loading = false;
      this.modalSetting.index = 0;
    },
    changePage(page) {
      this.tableShow.currentPage = page;
      this.getList();
    },
    changeSize(size) {
      this.tableShow.pageSize = size;
      this.getList();
    },
    search() {
      this.tableShow.currentPage = 1;
      this.getList();
    },
    getList() {
      let vm = this;
      vm.listLoading = true;
      getList({
        page: vm.tableShow.currentPage,
        size: vm.tableShow.pageSize,
        id_card: vm.searchConf.id_card,
        nickname: vm.searchConf.nickname,
        phone: vm.searchConf.phone,
        name: vm.searchConf.name,
        status: vm.searchConf.status,
        export: vm.searchConf.export
      }).then(response => {
        vm.tableData = response.data.data.list;
        vm.tableShow.listCount = response.data.data.count;
        vm.listLoading = false;
      });
    },
  }
}
</script>
